<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong> &nbsp; {{num}} </strong></span>
    <ul class="filters" >
      <li>
        <a :class="{selected:isSel === 'all'}" href="javascript:;" @click="isSel = 'all'">全部</a>
      </li>
      <li>
        <a href="javascript:;" :class="{selected:isSel === 'no'}" @click="isSel = 'no'">未完成</a>
      </li>
      <li>
        <a href="javascript:;" :class="{selected:isSel === 'yes'}" @click="isSel = 'yes'">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="$store.commit('list/DEL_DONE')">清除已完成</button>
  </footer>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  data(){
   return {
    isSel:'all'
   }
  },
  computed:{
    ...mapGetters(['num'])
  },
  // methods:{
  //   delDone(){
  //     this.$store.commit('list/DEL_DONE')
  //   }
  // },
  watch:{
    isSel:{
      immediate:true,
      handler(val){
        this.$store.commit('nav/SHOW_TODO',val)
      }
    }
  }
}
</script>
